import {DeviceStatusIcon} from '@/components/images'
import {View} from '@tarojs/components'
/**信息item */
const InfoItem: React.FC<{
  label: string
  value: string
  isLast?: boolean
}> = ({label, value, isLast}): JSX.Element => {
  return (
    <View className={`h-21 flex items-center ${isLast ? '' : 'mb-10'}`}>
      <View className="hanzi text-13 text-left">{label}:</View>
      <View className="hanzi flex-1 text-13 text-right">{value}</View>
    </View>
  )
}
/**信息块 */
const InfoBox: React.FC<{info: any}> = ({info}): JSX.Element => {
  return (
    <View>
      <View className="mb-30">
        <InfoItem label={'设备编号'} value={'112276'}></InfoItem>
        <InfoItem
          label={'最后监测时间'}
          value={'2011-07-12 17:55:14'}
        ></InfoItem>
        <InfoItem label={'创建时间'} value={'2022-07-01 11:55:14'}></InfoItem>
        <InfoItem
          label={'运行时长'}
          value={'886 天 23 小时 35 分'}
          isLast={true}
        ></InfoItem>
      </View>
      <View className="mb-30">
        <InfoItem
          label={'设备地址'}
          value={'杭州市萧山区宁围街道水博大道118号'}
        ></InfoItem>
        <InfoItem
          label={'控制器名称'}
          value={'多参数水质检测仪LK950'}
        ></InfoItem>
        <InfoItem label={'监测参数'} value={'温度,pH,余氯,浊度,ORP'}></InfoItem>
        <InfoItem
          label={'设备码'}
          value={'edfd-fdsdfsf-fdsd-1546-4546'}
          isLast={true}
        ></InfoItem>
      </View>
      <View className="">
        <InfoItem
          label={'服务开始时间'}
          value={'2022-07-01 17:55:14'}
        ></InfoItem>
        <InfoItem
          label={'服务到期时间'}
          value={'2023-07-01 17:55:14'}
          isLast={true}
        ></InfoItem>
      </View>
    </View>
  )
}

export const DeviceInfoCard: React.FC = (): JSX.Element => {
  return (
    <View className="h-460 px-16 pt-18 mt-18 rounded-card bg-white">
      {/* 公司名称 */}
      <View className="h-22 text-16 mb-12 font-medium">白马体育公园游泳馆</View>
      {/* 状态 */}
      <View className="h-20 mr-6 mb-16 flex items-center">
        <DeviceStatusIcon status={'error'}></DeviceStatusIcon>
        <View className="h-20 leading-20 text-center text-14 font-medium">
          故障
        </View>
      </View>
      {/* 分割线 */}
      <View className="w-full px-2 mb-16">
        <View
          className="h-0"
          style={{
            borderTop: '2rpx solid #f0f0f0'
          }}
        ></View>
      </View>
      {/* 设备信息 */}
      <InfoBox info=""></InfoBox>
    </View>
  )
}
